<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户注册</title>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="shortcut icon" th:href="@{/static/img/favicon.ico}" type="image/x-icon"/>
    <!--CSS-->
    <link rel="stylesheet" type="text/css" th:href="@{/static/js/layui/css/layui.css}">
</head>

<body>
<form class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="account" lay-verify="required|account"
                       autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="userName" lay-verify="required|userName" autocomplete="off">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="phone" name="phone" lay-verify="required|phone" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="email" lay-verify="required|email" autocomplete="off">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" class="layui-input" name="pass" lay-verify="required|pass" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">重复密码</label>
            <div class="layui-input-block">
                <input type="password" class="layui-input" name="rePass" lay-verify="required|rePass"
                       autocomplete="off">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="birthday" id="birthday" autocomplete="off" readonly>
            </div>
        </div>
    </div>

    <div class="layui-form-item" pane="">
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked="">
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>
    </div>

    <div class="layui-form-item" pane="">
        <div class="layui-inline">
            <label class="layui-form-label">爱好</label>
            <div class="layui-input-block">
                <input type="checkbox" name="hobby1" lay-skin="primary" title="篮球" checked="">
                <input type="checkbox" name="hobby2" lay-skin="primary" title="足球">
                <input type="checkbox" name="hobby3" lay-skin="primary" title="排球">
                <input type="checkbox" name="hobby4" lay-skin="primary" title="乒乓球">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地市</label>
        <div class="layui-input-inline">
            <select id="province" name="province" lay-filter="province" lay-verify="required"></select>
        </div>
        <div class="layui-input-inline">
            <select id="city" name="city" lay-filter="city" lay-verify="required"></select>
        </div>
        <div class="layui-input-inline">
            <select id="area" name="area" lay-filter="area" lay-verify="required"></select>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">详细地址</label>
        <div class="layui-input-block">
            <textarea placeholder="10-50个有效字符" class="layui-textarea" name="address" lay-verify="required|address"
                      autocomplete="off"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="verifyCode" lay-verify="required|verifyCode"
                       autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <img id="verifyCodeImg" onclick="loadVerifyCodeImg()" style="border-radius:4px;vertical-align:middle;">
        </div>
    </div>

    <!--<div class="layui-form-item layui-form-text">-->
    <!--<label class="layui-form-label">备注</label>-->
    <!--<div class="layui-input-block">-->
    <!--<textarea class="layui-textarea layui-hide" id="description" name="description" lay-verify="content"></textarea>-->
    <!--</div>-->
    <!--</div>-->

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="register">注册</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--JS-->
<script type="text/javascript" th:src="@{/static/js/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/static/js/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/baseUtil.js}"></script>
<script type="text/javascript" th:src="@{/static/js/crypto/crypto-js.js}"></script>
<script>
    $(function () {
        loadVerifyCodeImg();
    });

    function loadVerifyCodeImg() {
        $("#verifyCodeImg").prop("src", $.getProjectNameLI() + "/sys/admin/verifyCode?time=" + new Date().getMilliseconds());
    }

    layui.use(['form', 'laydate', 'layedit'], function () {
        // 日期对象
        var laydate = layui.laydate;
        laydate.render({elem: '#birthday'});

        // 编辑器对象
        //var layedit = layui.layedit;
        //var description = layedit.build('description');

        // 表单对象
        var form = layui.form;
        // 自定义表单密码校验规则:
        // 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
        // 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$
        // 强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
        form.verify({
            account: [/^[a-zA-Z][a-zA-Z0-9]{4,9}$/, "以字母开头的5-10位字母或数字组成"],
            userName: [/^[\u4e00-\u9fa5]{2,5}$/, "只能输入2到5个汉字"],
            pass: [/^[a-zA-Z]\w{5,9}$/, '以字母开头，长度在6~10之间，只能包含字母、数字和下划线'],
            rePass: function (value) {
                var pass = $("input[name='pass']").val();
                if (value !== pass) {
                    return "两次密码输入不一致"
                }
            },
            verifyCode: [
                /^[A-Za-z0-9]{4}$/,
                '由字母、数字组成的4位有效字符串'
            ]
        });

        //提交表单
        form.on('submit(register)', function (formData) {
            // 表单字段
            var account = formData.field.account;
            var userName = formData.field.userName;
            var phone = formData.field.phone;
            var email = formData.field.email;
            var pass = $.encryptLI(formData.field.pass);
            var birthday = formData.field.birthday;
            var sex = formData.field.sex;
            var hobby1 = formData.field.hobby1;
            var hobby2 = formData.field.hobby2;
            var hobby3 = formData.field.hobby3;
            var hobby4 = formData.field.hobby4;
            var hobbys = [];
            if (hobby1 === "on") {
                hobbys.push("篮球")
            }
            if (hobby2 === "on") {
                hobbys.push("足球")
            }
            if (hobby3 === "on") {
                hobbys.push("排球")
            }
            if (hobby4 === "on") {
                hobbys.push("乒乓球")
            }
            var hobby = hobbys.join(",");
            var province = formData.field.province.split(",")[0];
            var city = formData.field.city.split(",")[0];
            var area = formData.field.area.split(",")[0];
            var address = formData.field.address;
            var verifyCode = formData.field.verifyCode;

            $.ajax({
                url: $.getProjectNameLI() + "/sys/admin/register",
                async: false,
                type: 'post',
                dataType: "json",
                data: {
                    account: account,
                    userName: userName,
                    phone: phone,
                    email: email,
                    pass: pass,
                    birthday: birthday,
                    sex: sex,
                    hobby: hobby,
                    province: province,
                    city: city,
                    area: area,
                    address: address,
                    verifyCode: verifyCode
                },
                error: function (XMLHttpRequest) {
                    layer.msg("系统繁忙，稍后重试！");
                },
                success: function (res, textStatus, jqXHR) {
                    if (res.code > 0) {
                        layer.msg(res.message);
                    } else {
                        layer.msg('注册成功！', function () {
                            window.location.replace($.getProjectNameLI() + "/toLogin");
                        });
                    }
                },
                complete: function (XMLHttpRequest) {
                }
            });

            return false; // 阻止表单提交
        });

        // 实例化地市三级下拉列表
        $("#province").selectCasThreeLI({form: form, selectOneOptionValue: '江苏省', selectTwoOptionValue: '南京市', selectThreeOptionValue: '江宁区'});
    });
</script>

</body>
</html>